---
title: Bảng màu
image: /images/user-guide/fields/field.png
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

## Thẻ Bảng Màu

Đại diện cho các bảng màu khác nhau và được thiết kế đặc biệt cho giao diện sáng và tối.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemeCard } from "twenty-ui/display";

export const MyComponent = () => {
  return (
      <ColorSchemeCard
      variant="Dark"
      selected={true}
      />
  );
};
```

</Tab>

<Tab title="Props">

| Thuộc Tính         | Loại                                    | Mô tả                                                                                    | Mặc định       |
| ------------------ | --------------------------------------- | ---------------------------------------------------------------------------------------- | -------------- |
| biến thể           | string                                  | Biến thể của bảng màu. Các tùy chọn bao gồm `Tối`, `Sáng`, và `Hệ thống` | giao diện sáng |
| đã chọn            | boolean                                 | Nếu `true`, hiển thị dấu kiểm để chỉ ra bảng màu đã chọn                                 |                |
| thuộc tính bổ sung | `React.ComponentPropsWithoutRef<'div'>` | Các thuộc tính tiêu chuẩn của phần tử HTML `div`                                         |                |

</Tab>

</Tabs>

## Trình chọn Bảng Màu

Cho phép người dùng chọn giữa các bảng màu khác nhau.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemePicker } from "twenty-ui/display";

export const MyComponent = () => {
  return <ColorSchemePicker
  value="Dark"
  onChange
  />;
};
```

</Tab>

<Tab title="Props">

| Thuộc Tính | Loại       | Mô tả                                                           |
| ---------- | ---------- | --------------------------------------------------------------- |
| giá trị    | `Bảng màu` | Bảng màu hiện tại đã được chọn                                  |
| onChange   | hàm        | Hàm gọi lại bạn muốn kích hoạt khi người dùng chọn một bảng màu |

</Tab>

</Tabs>
